import React from 'react';
import { CellItemProps } from '../props-type';
import { getModeData, formatCellValue } from '../common/help';
import { BASE_WIDTH } from '../common/constant';
import '../style/index.less';
import { qrcode, barcode } from '../common/image/image';
/**
 * 组件功能：样式编辑区块页面
 *
 */
const CellItem = ({
    type,
    row_type,
    parentParam,
    rowData,
    item,
    itemRows,
    block_id,
    cellSelectedId,
    billImageList,
    templateData,
    onSelectCell,
}: CellItemProps) => {
    // cell选择方法
    const handleSelectCell = (e) => {
        if (type === 'view' || itemRows.row_type === '5') return;
        onSelectCell(e, item, itemRows, block_id);
    };
    const { title, font_style, width, data_value, cell_id } = item;
    // ======计算cell样式======
    let cellClass = 'cell cell-font-sm';
    const fontStyleArray = font_style.split(',');
    // 字体大小
    if (fontStyleArray[0] === '1') {
        cellClass = 'cell cell-font-md';
    } else if (fontStyleArray[0] === '2') {
        cellClass = 'cell cell-font-lg';
    }
    // 字体粗细
    if (fontStyleArray[2] === '1') {
        cellClass += ' cell-font-bold';
    }
    // 如果是条形码、二维码、图片，那么增加图片样式
    if (row_type === '2' || row_type === '3' || row_type === '4') {
        cellClass += ' cell-image';
    }
    // 增加选中cell样式
    if (cell_id === cellSelectedId) {
        cellClass += ' cell-active';
    }
    // 计算cell宽度百分比
    const cellWidthRender = Math.ceil(width * BASE_WIDTH / 48);
    // 下面如何渲染根据row_type进行完成
    let cellValue;
    let cellDataValue;
    // 这里根据row_type的不同进行不同的赋值
    if (row_type === '1') {
        // 父级模型key值获取, 这里的key值也需要考虑模板字符串，这里要当成普通的非列表的情形处理，所以row_type我们传'0'即可，parentParam为null
        cellDataValue = getModeData('0', null, data_value, rowData, templateData);
    } else {
        cellDataValue = getModeData(row_type, parentParam, data_value, rowData, templateData);
    }
    // cell填充值，考虑聚合与否
    if (fontStyleArray[3] === '0') {
        cellValue = `${title}${cellDataValue}`;
    } else if (fontStyleArray[3] === '1') {
        cellValue = cellDataValue;
    }
    // 根据条件转换显示字符串
    let cellDataValueFormat;
    // 如果row_type为2是条形码，row_type为3是二维码；这些是后端动态生成的，我们用假的二维码跟条形码替代（公司网址跟88888888分别生成二位码跟条形码）
    if (row_type === '2') {
        cellDataValueFormat = barcode;
    } else if (row_type === '3') {
        cellDataValueFormat = qrcode;
    } else if (row_type === '4') {
        // 如果类型是图片，需要从billImageList里获取到对应的url地址
        billImageList.forEach(itemBill => {
            if (itemBill.imageId === cellValue) {
                cellDataValueFormat = itemBill.imageUrl;
            }
        });
    } else {
        cellDataValueFormat = formatCellValue(cellValue, width, fontStyleArray[5], fontStyleArray[0], fontStyleArray[4]);
    }
    // 如果row_type是2、3、4分别代表条形码、二维码、图片，此时要做不同的展示
    let cellDomRender;
    if (row_type === '2' || row_type === '3' || row_type === '4') {
        cellDomRender = <div className={cellClass} key={cell_id} style={{ width: cellWidthRender }}><img src={cellDataValueFormat} /></div>;
    } else {
        // 下面选择还需要具体的row的json，不然没法对空行进行操作
        // eslint-disable-next-line react/jsx-no-bind
        cellDomRender = <div onClick={(e) => handleSelectCell(e)} className={cellClass} key={cell_id} style={{ width: cellWidthRender }} dangerouslySetInnerHTML={{ __html: cellDataValueFormat }} />;
    }
    return cellDomRender;
};

export default CellItem;